<template>
	<div class="system-common-container layout-pd">
		<el-card shadow="hover">
			<el-form :model="state.tableData" ref="queryForm" :inline="true">
				<el-form-item label='手机号码'>
					<el-input v-model="state.phone" size="default" placeholder="请输入手机号码" style="max-width: 180px"
						clearable>
					</el-input>
				</el-form-item>
				<el-form-item>
					<el-button size="default" type="primary" class="ml10" @click="handleQuery"
						v-auth="'csRegister:query'" >
						<el-icon>
							<ele-Search />
						</el-icon>
						查询
					</el-button>
				</el-form-item>
			</el-form>
		</el-card>
		<el-card shadow="hover" style="margin-top: 8px;">
			<el-form size="default" label-width="80px" class="mt35">
				<el-row :gutter="25">

					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
						<el-form-item label="订单编号">
							{{ state.productOrder.id }}
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
						<el-form-item label="手机号">
							{{ state.productOrder.phone }}
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
						<el-form-item label="省份">
							{{ state.productOrder.province }}
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
						<el-form-item label="城市">
							{{ state.productOrder.city }}
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
						<el-form-item label="信息费(元)">
							{{ (state.productOrder.informationFee / 100).toFixed(2) }}
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
						<el-form-item label="订单状态">
							<template #default="scope">
								<el-tag type="success" v-if="state.productOrder.orderStatus === 1">成功</el-tag>
								<el-tag type="success" v-else-if="state.productOrder.orderStatus === 2">处理中</el-tag>
								<el-tag type="danger" v-else-if="state.productOrder.orderStatus === 3">失败</el-tag>
								<el-tag type="success" v-else-if="state.productOrder.orderStatus === 4">退订</el-tag>
								<el-tag type="info" v-else>未知</el-tag>
							</template>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
						<el-form-item label="订单时间">
							{{ state.productOrder.createTime }}
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
						<el-form-item label="产品名称">
							{{ state.productOrder.productName }}
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
						<el-form-item label="渠道名称">
							{{ state.productOrder.channelName }}
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
						<el-form-item label="退订状态">
							<template #default="scope">
								<el-tag type="success" v-if="state.productOrder.unsubscribeStatus === 1">成功</el-tag>
								<el-tag type="success"
									v-else-if="state.productOrder.unsubscribeStatus === 2">处理中</el-tag>
								<el-tag type="success"
									v-else-if="state.productOrder.unsubscribeStatus === 3">失败</el-tag>
								<el-tag type="success"
									v-else-if="state.productOrder.unsubscribeStatus === 4">退订</el-tag>
								<el-tag type="info" v-else>未知</el-tag>
							</template>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
						<el-form-item label="退订时间">
							{{ state.productOrder.unsubscribeTime }}
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
						<el-form-item label="是否扣除">
							<template #default="scope">
								<el-tag type="error" v-if="state.productOrder.isDeduction">扣除</el-tag>
								<el-tag type="info" v-else>不扣除</el-tag>
							</template>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
						<el-form-item label="操作">
							<el-button size="small" type="primary" plain @click="onRegisterClick(state.productOrder)"
								v-auth="'csRegister:register'">登记</el-button>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</el-card>
		<el-card shadow="hover" style="margin-top: 8px" :body-style="{ paddingBottom: '15' }">
			<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%" row-key="id">
				<el-table-column prop="phone" width="115" label="手机号码" show-overflow-tooltip align='center' />
				<el-table-column prop="processingResults" label="登记处理情况" show-overflow-tooltip align='center'>
					<template #default="scope">
						<el-tag type="success" v-if="scope.row.processingResults === 1">退订业务</el-tag>
						<el-tag type="success" v-else-if="scope.row.processingResults === 2">退订业务+退费</el-tag>
						<el-tag type="success" v-else-if="scope.row.processingResults === 3">由运营商通知处理的客服操作</el-tag>
						<el-tag type="info" v-else>未登记</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="description" label="客户情况说明" show-overflow-tooltip align='center' />
				<el-table-column prop="processingTime" label="登记处理时间" show-overflow-tooltip align='center' />
				<el-table-column label="操作" show-overflow-tooltip width="240" align='center'>
					<template #default="scope">
						<el-button size="small" text type="primary" @click="onOpenEditDialog('edit', scope.row)"
							v-auth="'csRegister:apply'">处理</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class='table-pagination'>
				<el-pagination @size-change='onHandleSizeChange' @current-change='onHandleCurrentChange'
					:page-sizes='pageSizes' :current-page='state.tableData.param!.pageNum' background
					:page-size='state.tableData.param.pageSize' layout='sizes,total, ->, prev, pager, next, jumper'
					:total='state.tableData.total' v-if='state.tableData.total !== 0'>
				</el-pagination>
			</div>
			<div style='height: 45px'></div>
		</el-card>
		<CsrDialog ref="csrDialogRef" @refresh="getTableData()" />
	</div>
</template>

<script setup lang="ts" name="csRegister">
import { defineAsyncComponent, ref, reactive, onMounted, computed } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';

import apiCs from '/@/api/cs/index';
import apiProductOrder from '/@/api/order/productOrder/index';

// 引入组件
const CsrDialog = defineAsyncComponent(() => import('/@/views/cs/register/dialog.vue'));

// 定义变量内容
const csrDialogRef = ref();
const state = reactive<SysCsState>({
	phone: '',
	productOrderId: '',
	productOrder: Object,
	tableData: {
		data: [],
		total: 0,
		loading: false,
		param: {
			pageNum: 1,
			pageSize: 20,
		},
	},
});

const handleQuery = async () => {
	state.productOrder = {};
	state.tableData.data = [];
	state.tableData.total = 0;
	await queryProductRecord(state.phone);
	queryCustomerServiceRecord(state.phone, "");
};

const queryProductRecord = (phone: string) => {
	apiProductOrder()
		.query({ phone: phone })
		.then((res) => {
			if (res.data.result) {
				state.productOrder = res.data.result;
			}
		})
		.catch((err) => { });
};

// 登记
const onRegisterClick = (row: RowProductOrderType) => {
	apiCs()
		.registerCustomerServiceRecord(row)
		.then((res) => {
			queryCustomerServiceRecord(state.phone, "");
			ElMessage.success('登记成功');
		})
		.catch((err) => { });
};

// 查询渠道产品客户服务记录
const queryCustomerServiceRecord = (phone: string, productOrderId: string) => {
	apiCs().queryCustomerServiceRecord({ phone: phone, productOrderId: productOrderId })
		.then(res => {
			if (res.data.resCode != '0000') {
				ElMessage.error(res.data.resMessage);
			}
			if (res.data.result.total > 0) {

				state.tableData.data = res.data.result.items;
				state.tableData.total = res.data.result.total;
			}
			state.tableData.loading = false;
		})
		.catch(err => { });
};

// 初始化表格数据
const getTableData = () => {
	state.tableData.loading = true;
	state.tableData.data = [];
	queryCustomerServiceRecord(state.phone, state.productOrderId);
	setTimeout(() => {
		state.tableData.loading = false;
	}, 500);
};

// 打开编辑菜单弹窗
const onOpenEditDialog = (type: string, row: RowSysCSType) => {
	csrDialogRef.value.openDialog(type, row, state.productOrder);
};
// 分页改变
const onHandleSizeChange = (val: number) => {
	state.tableData.param.pageSize = val;
	getTableData();
};
// 分页改变
const onHandleCurrentChange = (val: number) => {
	state.tableData.param.pageNum = val;
	getTableData();
};
// 页面加载时
onMounted(() => {

});

const pageSizes = computed(() => {
	let defaultSizes = [20, 50, 100];
	if (state.tableData.param!.pageSize) {
		if (!defaultSizes.includes(state.tableData.param!.pageSize)) {
			defaultSizes.push(state.tableData.param!.pageSize);
		}
	}
	return defaultSizes;
});


const onStart = (e) => {
	// console.log(e.target, '移动的元素');
	e.dataTransfer.effectAlloweb = 'move';
}

const OnGover = (e) => {
	// console.log(e.target,'结束--几百毫秒执行一次，只要移动就执行');
	e.preventDefault();

}

const onEnent = (e) => {
	// console.log(e.target, '移入，只执行一次');

}

const onDrop = (e) => {
	// console.log(e.target, '松手i之后，在那个元素松手的可以获取到');

}
</script>

<style scoped lang="scss">
.system-role-container {
	.system-role-padding {
		padding: 15px;

		.el-table {
			flex: 1;
		}
	}
}

.mb3000 {
	width: 25%;

	.el-form-item__content {
		min-width: 150px !important;
	}
}
</style>
